<template>
	<view class="container">
		<!-- 用户未实名认证 -->
		<!-- <view id="no-real" v-show="userInfo.idCardStatus != 2"> -->
		<view id="no-real" v-if="userInfo.idCardStatus == 0 || userInfo.idCardStatus === 3">
			<view class="text1"> 请上传身份证的正反面 </view>
			<view class="text2">请保持身份证完整清晰</view>
			<!-- 	<text>实名认证成功，才能快速发单接单，请按照规定上传身份证照片，我们将严格保证您的信息安全。</text> -->
			<!-- 姓名 -->
			<!-- <view class="input name">
				<view>
					<span>*</span>
					<text>姓</text>
					<text>名</text>
					
				</view>
				<input :disabled="!(userInfo.idCardStatus === 0 || userInfo.idCardStatus === 3)" v-model="cardInfo.realName" type="text" placeholder="请输入您的姓名" placeholder-class="plaho"/>
			</view> -->
			<!-- 此处改动， 18-25   -->
			<!-- <view class="input Tel" v-show="cardInfo.userType == 0? false :true" >
					<view>
						<span>*</span>
						<text>备用电话</text>
					</view>
					<input :disabled="!(userInfo.idCardStatus === 0 || userInfo.idCardStatus === 3)" v-model="cardInfo.telephone" type="number" maxlength="11" placeholder="请输入您的备用电话" placeholder-class="plaho"/>
				</view>
				<view class="Standby-telephone" v-show="cardInfo.userType == 0? false :true"><text>在与您无法取得联系时，我们将拨打备用电话，备用电话不要与注册电话相同。</text></view>-->
			<!-- 身份证 -->
			<!-- <view class=" input idNumber">
				<view>
					<span>*</span>
					<text>身份证号</text>
				</view>
				<input :disabled="!(userInfo.idCardStatus === 0 || userInfo.idCardStatus === 3)" v-model="cardInfo.idCardNum" type="text" maxlength="18" placeholder="请输入您的身份证号" placeholder-class="plaho"/>
			</view> -->
			<!-- 上传身份证 -->
			<view class="idCard">
				<view>
					<text>1.请上传身份证正面</text>
				</view>
				<view class="img" style="position: relative;">
					<view class="shui-left" v-if="cardInfo.idCardUpPic !=''"> 仅限找零工身份认证 </view>
					<image @click="getIDCard('idCardUpPic')"
						:src="cardInfo.idCardUpPic ? imgPath + cardInfo.idCardUpPic:'https://images.linglinggong.net/static/icon1/99.png'"
						mode="aspectFit"></image>
					<!-- 	<image @click="getIDCard('idCardDownPic')"
						:src="cardInfo.idCardDownPic ? imgPath + cardInfo.idCardDownPic:'/static/icon1/10.png'"
						mode="aspectFit"></image>
					<view class="shui-right" v-if="cardInfo.idCardDownPic !=''"> 仅限找零工身份认证 </view> -->
				</view>
				<view>
					<text>1.2.请上传身份证反面</text>
				</view>
				<view class="img" style="position: relative;">
					<view class="shui-left" v-if="cardInfo.idCardUpPic !=''"> 仅限找零工身份认证 </view>
					<!-- 	<image @click="getIDCard('idCardUpPic')"
						:src="cardInfo.idCardUpPic ? imgPath + cardInfo.idCardUpPic:'/static/icon1/09.png'"
						mode="aspectFit"></image> -->
					<image @click="getIDCard('idCardDownPic')"
						:src="cardInfo.idCardDownPic ? imgPath + cardInfo.idCardDownPic:'https://images.linglinggong.net/static/icon1/100.png'"
						mode="aspectFit"></image>
					<view class="shui-right" v-if="cardInfo.idCardDownPic !=''"> 仅限找零工身份认证 </view>
				</view>
			</view>
			<!-- model框 -->
			<u-popup v-model="isTips" mode="center" border-radius="14" width="290px" height="186px">
				<view class="modal">
					<view class="modal-flex">
						<text>温馨提示</text>
						<!-- <view class="modal-content">抱歉，您的年龄不符合平台要求</view> -->
						<view class="modal-content">{{tipsErr}}</view>
					</view>
					<view class="tips-confirm" @click="isTips = false">确认</view>
				</view>
			</u-popup>
			<!-- 			<view class="explain">
				<text>说明</text>
				<view class="explain-context" v-html="explainContext">
				</view>
			</view> -->
			<view v-if="userInfo.idCardStatus === 0 || userInfo.idCardStatus === 3" class="submit" @click="idCard">完成
			</view>
		</view>
		<!-- 用户已提交 -->
		<view id="real" v-if="userInfo.idCardStatus == 1">
			<view>
				<view>
					<view>
						<text>姓名</text>
					</view>
					<text>{{ cardInfo.realName }}</text>
				</view>
				<view>
					<view>
						<text>性别</text>
					</view>
					<text>{{ cardInfo.gender }}</text>
				</view>
				<view>
					<view>
						<text>年龄</text>
					</view>
					<text>{{ cardInfo.userAge }}</text>
				</view>
				<view>
					<view>身份证号</view>
					<!-- <text>{{ userInfo.idCardNum.replace(userInfo.idCardNum.slice(4,14), '**********')}}</text> -->
					<text>{{ cardInfo.idCardNum }}</text>
				</view>
				<view class="card">
					<view>上传身份证</view>
					<view class="img">
						<image
							:src="cardInfo.idCardUpPic ? imgPath + cardInfo.idCardUpPic :'https://images.linglinggong.net/static/icon1/99.png'"
							mode="aspectFill"></image>
						<image
							:src="cardInfo.idCardDownPic ? imgPath + cardInfo.idCardDownPic :'https://images.linglinggong.net/static/icon1/100.png'"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="face" @click="idFace">人脸识别</view>
		</view>
		<!-- 用户已实名 -->
		<view id="real" v-if="userInfo.idCardStatus == 2">
			<image src="https://images.linglinggong.net/static/icon1/11.png" mode="aspectFill"></image>
			<text>认证成功</text>
			<text>{{ userInfo.idCardTime }}</text>
			<view>
				<view>
					<view>
						<text>姓名</text>
					</view>
					<text>{{ cardInfo.realName }}</text>
				</view>
				<view>
					<view>
						<text>性别</text>
					</view>
					<text>{{cardInfo.gender}}</text>
				</view>
				<view>
					<view>
						<text>年龄</text>
					</view>
					<text>{{ userInfo.user.age }}</text>
				</view>
				<view>
					<view>身份证号</view>
					<!-- <text>{{ userInfo.idCardNum.replace(userInfo.idCardNum.slice(4,14), '**********')}}</text> -->
					<text>{{ cardInfo.idCardNum }}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				pic: '',
				imgPath: '', //图片路径
				uploadToken: '', // 上传图片需要的Token
				userInfo: {
					user: {},
					params: {}
				}, //当前用户信息
				cardInfo: {
					idCardNum: '', // 号码
					idCardDownPic: '', // 身份证反面
					idCardUpPic: '', // 身份证正面
					realName: '', // 姓名
					birthday: '',
					gender: '',
					userAge: ''
					//telephone:'',//备用电话 <!-- 此处改动，83-85
					//phonenumber:"",//注册的电话
					//userType:'',//用户类型
				},
				isTips: false, //提示框
				tipsErr: '', //提示错误
				explainContext: '', //说明文案
				tempImg: '',
				sexList: ['男', '女'],
				age: ''
			}
		},
		methods: {
			// 判断审核状态
			whatStatus() {
				if (this.userInfo.idCardStatus === 3) {
					//如果审核失败，
					uni.showModal({
						title: '审核失败',
						content: this.userInfo.remark,
						showCancel: false
					})
				} else if (this.userInfo.idCardStatus === 1) {
					uni.showToast({
						title: '正在审核中...',
						icon: 'none'
					})
				} else if (this.userInfo.idCardStatus === 2) {
					return
				}
			},
			// 预览选中的照片
			previewImage(img) {
				uni.previewImage({
					urls: [img]
				})
			},
			getIDCard(storage) {
				console.log('aaaaaaaaaaaaaaaaaaaaaa1')
				// #ifdef APP-PLUS
				// let that = this
				// card.processOcr({
				// 	token: '',
				// 	ocrType: 666,
				// 	from: 0
				// }, result => {
				// 	if (result.code == '0000') {
				// 		uni.showLoading({
				// 			title: '加载中...'
				// 		})
				// 		base64ToPath("data:image/png;base64," + result.image).then(path => {
				// 			this.uploadPicture(path, storage)
				// 		})
				// 	}
				// });
				// #endif
				this.handleChooseImg(storage)
			},
			// 选择图片
			handleChooseImg(storage) {
				// 如果账号处于审核或者审核通过时，点击则预览图片
				if (this.userInfo.idCardStatus === 1 || this.userInfo.idCardStatus === 2) return this.previewImage(this
					.imgPath + this.cardInfo[storage])
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						uni.showLoading({
							title: '图片上传中...'
						})
						this.uploadPicture(res.tempFilePaths[0], storage)
					}
				})
			},
			updateUserImage(e) {
				let _this = this
				uni.uploadFile({
					url: this.$api.uploadPic,
					name: 'file',
					filePath: e,
					formData: {
						token: this.uploadToken
					},
					success: ({
						data
					}) => {
						this.cardInfo['idFace'] = JSON.parse(data).hash
						this.doRealAvatarVali(JSON.parse(data).hash)
					}
				})
			},
			// 上传图片
			uploadPicture(tempFilePaths, storage) {
				// console.log('~~~~~~~~', tempFilePaths, storage, this.uploadToken)
				uni.uploadFile({
					url: this.$api.uploadPic,
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						token: this.uploadToken
					},
					success: ({
						data
					}) => {
						uni.hideLoading()
						this.cardInfo[storage] = JSON.parse(data).hash
						// console.log(this.cardInfo[storage])
					}
				})
			},
			//人脸识别
			idFace() {
				//防抖
				if (this.timerId) return;
				this.timerId = setTimeout(() => {
					clearTimeout(this.timerId);
					this.timerId = null
				}, 5000)
				uni.navigateTo({
					url: '/pages/camera/idphoto/idphoto?isAlbum=' + false
				})
			},
			// 提交身份证信息
			async idCard() {
				if (!this.cardInfo.idCardUpPic) return uni.showToast({
					title: '请上传身份证正面照~',
					icon: 'none'
				})
				if (!this.cardInfo.idCardDownPic) return uni.showToast({
					title: '请上传身份证反面照~',
					icon: 'none'
				})
				let resData = {
					token: uni.getStorageSync('token'),
					urlBack: this.cardInfo.idCardDownPic,
					urlFace: this.cardInfo.idCardUpPic
				}
				uni.showLoading({
					title: '识别中,请稍等...'
				});
				let res = await this.$fetch(this.$api.doIdentityOCR, resData, 'POST', 'JSON')
				console.log('提交身份证信息', res);
				uni.hideLoading();
				if (res.code == 0) {
					this.cardInfo.authObj = res.data;
					this.cardInfo.idCardNum = res.data.idnumber;
					this.cardInfo.realName = res.data.name;
					this.cardInfo.gender = res.data.gender;
					this.cardInfo.birthday = res.data.idnumber;
					this.calculateAge(res.data.idnumber.substring(6, 10) + "-" + res.data.idnumber.substring(10, 12) +
						"-" + res.data.idnumber.substring(12, 14));
					this.doIdentityCheckAge(res.data.birthDate);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
					this.tipsErr = res.msg;
					this.isTips = true;
				}
			},
			//人像认证
			async doRealAvatarVali(url) {
				// console.log('url',url);
				// let url = 'FuYyBiPhp6L_u17Mfip5xybBPfGN'
				uni.showLoading({
					title: '人像认证中,请稍等...'
				});
				let res = await this.$fetch(this.$api.doRealAvatarVali, {
					url
				}, 'POST')
				console.log('人像认证', res);
				if (res.code == 0) {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
					this.doIdentityUpload();
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				}
			},
			//检测是否符合年龄要求
			async doIdentityCheckAge(birthDate) {
				let res = await this.$fetch(this.$api.doIdentityCheckAge, {
					birthDate
				}, 'POST')
				console.log('检测是否符合年龄要求', res);
				if (res.code == 0) {
					this.userInfo.idCardStatus = 1;
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				}
			},
			//身份认证信息并保存
			async doIdentityUpload() {
				console.log(this.cardInfo);
				let authDtoStep4 = {
					'authObj': this.cardInfo.authObj,
					'urlBack': this.cardInfo.idCardDownPic,
					'urlFace': this.cardInfo.idCardUpPic,
				}
				let res = await this.$fetch(this.$api.doIdentityUpload, authDtoStep4, 'POST', 'JSON')
				console.log('身份认证信息', res);
				if (res.code == 0) {
					uni.showToast({
						icon: 'none',
						title: '提交成功'
					});
					this.doIdentityCheck();
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				}
			},
			//身份认证状态
			async doIdentityCheck() {
				let res = await this.$fetch(this.$api.doIdentityCheck, {}, 'GET')
				console.log('身份认证状态', res);
				console.log(111, this.userInfo);
				if (res.code == 0) {
					this.userInfo.idCardStatus = res.data.idCardStatus;
					let idCardJson = JSON.parse(res.data.idCardJson);
					// console.log('ss',idCardJson)
					this.cardInfo.gender = idCardJson.gender;
					let idnumber = idCardJson.iDNumber ? idCardJson.iDNumber.substring(6, 10) + "-" + idCardJson
						.iDNumber.substring(10, 12) + "-" + idCardJson.iDNumber.substring(12, 14) : ''
					this.calculateAge(idnumber);
					console.log(3444, this.cardInfo);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				}
			},
			// 计算年纪
			calculateAge(data) {
				let birthArr = data.split('-');
				let birth = {};
				birth.year = birthArr[0];
				birth.month = birthArr[1];
				birth.day = birthArr[2];
				const date = new Date();
				const currentYear = date.getFullYear();
				const currentMonth = date.getMonth() + 1;
				const currentDate = date.getDate();
				if (currentYear > birth.year) {
					this.cardInfo.userAge = currentYear - birth.year;
					if (currentMonth < birth.month || currentDate < birth.day) this.cardInfo.userAge -= 1;
				}
				console.log(112, this.cardInfo);
			},
			// 提交信息
			// async handleSubmit() {
			// 	let regTel = /^[1][3456789][0-9]{9}$/
			// 	let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
			// 	if (!reg.test(this.cardInfo.idCardNum)) return uni.showToast({ title: '请输入正确身份证号码~', icon: 'none' })
			// 	if(this.cardInfo.userType==1){
			// 		if(!regTel.test(this.cardInfo.telephone)) return uni.showToast({ title: '请输入备用电话~', icon: 'none' })
			// 		if(this.cardInfo.phonenumber == this.cardInfo.telephone) return uni.showToast({ title: '备用电话不能与注册电话相同~', icon: 'none' })
			// 	}
			// 	if (!this.cardInfo.realName) return uni.showToast({ title: '请输入姓名~', icon: 'none' })
			// 	let res = await this.$fetch(this.$api.add_card_apply, this.cardInfo, 'POST')
			// 	if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
			// 	uni.showToast({ title: '提交成功！' })
			// 	this.userInfo.idCardStatus = 1
			// 	this.userInfo.issuanceNum = 1
			// 	uni.setStorageSync("userInfor",this.userInfo)
			// 	let pages = getCurrentPages(); //获取页面栈
			// 	console.log(pages,"上一个页面");
			// 	// console.log(pages[0].__page__.path);
			// 	// console.log(pages[1].__page__.path);
			// 	// console.log(pages[pages.length-2].__page__.path );
			// 	if(pages[pages.length-2].route=="pages/job-detail/job-detail"){
			// 		// console.log("111111111111111111");
			// 		let beforePage = pages[pages.length -2]; //前一个页面
			// 		beforePage.$vm.real_name("审核中"); //前一个页面方法
			// 	}else if(pages[pages.length-2].route =="pages/app-employer/send-job/send-job"){
			// 		// console.log("2222222222222222");
			// 		let beforePage = pages[pages.length -2]; //前一个页面
			// 		beforePage.$vm.real_name("审核中"); //前一个页面方法
			// 	}
			// 	setTimeout(function() {uni.navigateBack()}, 600);
			// },
			//获取七牛上传TOKEN
			async getUploadToken() {
				let res5 = await this.$fetch(this.$api.get_qiniu_token, {}, 'POST')
				uni.setStorageSync('uploadToken', res5.msg)
				this.uploadToken = uni.getStorageSync('uploadToken')
			},
			// 获取用户登录手机号 // <!-- 此处改动 175-179
			async getuserIfor() {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				this.cardInfo.phonenumber = res.data.user.phonenumber
				this.userInfo = res.data
				if (res.data.payPwdFlag) {
					uni.setStorageSync('isHavePayPassword', true)
				} else {
					uni.setStorageSync('isHavePayPassword', false)
				}
				this.doIdentityCheck();
				if (this.userInfo.idCardStatus != 0) {
					this.cardInfo.realName = this.userInfo.realName
					this.cardInfo.idCardNum = this.userInfo.idCardNum
					this.cardInfo.idCardUpPic = this.userInfo.idCardUpPic
					this.cardInfo.idCardDownPic = this.userInfo.idCardDownPic
					this.cardInfo.telephone = this.userInfo.standbytelephone
					this.cardInfo.userType = this.userInfo.userType
					this.cardInfo.userAge = this.userInfo.user.age
					let sex1 = this.userInfo.user.sex == 0 ? '男' : '女'
					this.cardInfo.gender = this.cardInfo.gender ? this.cardInfo.gender : sex1
				}
				// 如果用户没有审核失败时 0: 待提交， 1：审核中， 2：审核通过， 3：审核驳回
			},
			//说明配置文案
			async realAuthTip() {
				let res = await this.$fetch(this.$api.realAuthTip, {}, 'GET')
				if (res.code == 0) {
					this.explainContext = res.data
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				}
			}
		},
		onLoad() {
			this.imgPath = uni.getStorageSync('imgPath')
			// this.userInfo = uni.getStorageSync('userInfo')
			// // 如果用户没有审核失败时 0: 待提交， 1：审核中， 2：审核通过， 3：审核驳回
			// this.cardInfo.realName = this.userInfo.realName
			// this.cardInfo.idCardNum = this.userInfo.idCardNum
			// this.cardInfo.idCardUpPic = this.userInfo.idCardUpPic
			// this.cardInfo.idCardDownPic = this.userInfo.idCardDownPic
			// this.cardInfo.telephone = this.userInfo.standbytelephone
			// this.cardInfo.userType = this.userInfo.userType
			this.whatStatus()
			this.getuserIfor()
			this.realAuthTip();
		},
		onShow() {
			this.getUploadToken()
		},
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="less" scoped>
	.container {
		overflow: hidden;

		#no-real {
			.text1 {
				margin-top: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #262626;
				margin-left: 28rpx;
			}

			.text2 {
				font-size: 28rpx;
				font-weight: 400;
				color: #515151;
				margin-top: 10rpx;
				margin-left: 28rpx;
				margin-bottom: 20rpx;
			}

			&>.input {
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;
				padding: 30rpx;

				&>view {
					position: relative;
					// display: flex;
					height: 40rpx;

					span {
						position: absolute;
						top: 8rpx;
						color: #E02020;
					}

					&>text {
						margin-left: 26rpx;
						// text-align-last: justify;//text-align: justify;不生效，最后一行
						color: rgba(64, 33, 16, 0.50);
					}
				}

				&>input {
					// border: 1px solid #000000;
					flex: 1;
					width: 500rpx;
					text-align: right;
				}

				.plaho {
					font-size: 14px;
					color: rgba(64, 33, 16, 0.50);
					text-align: right;
				}
			}

			.Standby-telephone {
				width: 750rpx;
				height: 128rpx;
				background: #F2F2F2;

				&>text {
					display: block;
					width: 686rpx;
					height: 64rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #7F7F7F;
					line-height: 40rpx;
					margin: 31rpx auto 33rpx;
				}
			}

			&>.name {
				&>view {
					&>text:last-child {
						margin-left: 28px;
					}
				}
			}

			&>.idCard {
				display: flex;
				flex-direction: column;
				background: #F2F2F2;
				height: 100vh;
				overflow: hidden;

				&>view {
					position: relative;

					&>span {
						position: absolute;
						top: 8rpx;
						color: #E02020;
					}

					&>text {
						display: block;
						font-size: 28rpx;
						font-weight: 400;
						color: #515151 !important;
						opacity: 0.8;
						margin: 40rpx 0 20rpx 28rpx !important;
					}
				}

				&>.img {
					width: 694rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 0 auto;

					.shui-left {
						position: absolute;
						z-index: 99999;
						left: 4%;
						bottom: 40%;
						width: 40%;
						height: 50rpx;
						transform: rotate(20deg);
						font-size: 26rpx;
						color: #fff;
						opacity: 0.5;
						// border: 1px solid;
					}

					.shui-right {
						z-index: 99999;
						position: absolute;
						right: 2%;
						bottom: 40%;
						width: 40%;
						height: 50rpx;
						transform: rotate(20deg);
						font-size: 26rpx;
						color: #fff;
						opacity: 0.5;
						// border: 1px solid;
					}

					&>image {
						width: 100%;
						height: 384rpx;
					}

					&>image:first-child {
						// margin-right: 30rpx;
					}
				}
			}

			.modal {
				display: flex;
				flex-direction: column;

				&>.modal-flex {
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 100%;

					&>text {
						margin-top: 40rpx;
						font-size: 34rpx;
						font-weight: bolder;
						color: #402110;
					}

					&>.modal-content {
						margin-top: 40rpx;
						font-size: 28rpx;
						color: #402110;
					}
				}

				&>.tips-confirm {
					height: 86rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 120rpx;
					border-top: 2rpx solid rgba(60, 60, 67, 0.29);
					font-size: 35rpx;
					color: #F39B19;
				}
			}

			&>.explain {
				display: flex;
				flex-direction: column;
				padding: 24rpx 30rpx;

				&>text {
					font-size: 24rpx;
					font-weight: bolder;
					color: gba(64, 33, 16, 0.5);
					;
				}

				&>.explain-context {
					margin-top: 12rpx;
					font-size: 24rpx;
					color: rgba(64, 33, 16, 0.5);
				}
			}

			&>.submit {
				width: 694rpx;
				height: 88rpx;
				margin: 0 auto;
				background: #FCC928;
				box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255, 133, 29, 0.3);
				border-radius: 12rpx;
				opacity: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				position: fixed;
				bottom: 30rpx;
				left: 50%;
				margin-left: -347rpx;

				&:active {
					opacity: 0.7;
				}
			}
		}

		#real {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 90vh;
			background-color: #FFFFFF;

			&>.face {
				width: 100vw;
				height: 100rpx;
				background: #FCC928;
				display: flex;
				justify-content: center;
				align-items: center;
				position: fixed;
				bottom: 0;
				left: 0;

				&:active {
					opacity: 0.7;
				}
			}

			&>image {
				margin: 72rpx 0;
				width: 592rpx;
				height: 340rpx;
			}

			&>text:nth-child(2) {
				height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 28px;
				font-weight: bold;
				letter-spacing: -0.68px;
			}

			&>text:nth-child(3) {
				margin: 16rpx 0 70rpx;
				color: rgba(64, 33, 16, 0.50);
			}

			&>view {
				position: relative;

				.card {
					border-top: 1px solid #F2F2F2;
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					&>view:nth-child(1) {
						margin-top: 24rpx;
					}

					&>.img {
						margin-top: 42rpx;

						&>image {
							width: 330rpx;
							height: 268rpx;
						}

						&>image:first-child {
							margin-right: 30rpx;
						}
					}
				}

				&>view {
					border-top: 1px solid #F2F2F2;
					width: 100vw;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					// &::before {
					// 	content: "";
					// 	position: absolute;
					// 	top: 100rpx;
					// 	left: 30rpx;
					// 	width: 690rpx;
					// 	height: 2rpx;
					// 	background: #F2F2F2;
					// 	border-radius: 1px;
					// }
					&>view {
						margin: 0 30rpx;
						color: rgba(64, 33, 16, 0.50);
					}

					&>text {
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>